body{
	background-color: #a5cfe8;
}
a{
	cursor: pointer;
}
.clear{
	clear: both;
}

.logo-btn{
	display: inline-block;
	li{
		list-style: none;
		display: inline-block;
		padding: 0 10px;
	}
	a{
		font-size: 20px;
		font: 14px 'Arial','Microsoft YaHei';
		color: #6c5d64;
		&:hover{
			color:#ff7d0e;
			text-decoration: none;
		}
	}
	span{
		font-size: 18px;
		margin-top: 10px;
		display: inline-block;
		position: relative;
		top: 3px;
		margin-right: 5px;
		color:#6c5d64;
	}	
}

.fix-head{
	width: 100%;
	height: 48px;
	border-top: 2px solid #fa7d3c;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	background-color: #fff;
	color: #333;
	.head-content{
		width: 1000px;
		margin: 0 auto;
		vertical-align: middle;
		height: 100%;
		.left-logo{
			height: 100%;
			vertical-align: middle;
			display: inline-block;
			
			a{
				cursor: pointer;
				width:140px;
				height: 46px;
				display: block;
			}
			span{
				display: block;
				background: url(http://img.t.sinajs.cn/t6/style/images/global_nav/WB_logo.png?id=1404211047727) no-repeat left center;
				width: 140px;
				height: 46px;
			}
		}
		.search-box{
			width: 275px;
			display: inline-block;
			input{
				outline-color: #ff7d0e;
				border-radius: 1px;
				border: 1px solid #eee;
				box-shadow: none;
				background-color: #eeeeee;
				color: black;
				padding: 3px 5px;
				width: 275px;
				height: 30px;
			}
			span{
				margin-left: -20px;
				color: #948989;
			}
		}
		.head-nav{
			margin-left: 20px;
		}

		.log{
			position: relative;
			float: right;
			ul{
				height: 46px;
				line-height: 46px;
			}
			.edit-btn{
				vertical-align: top;
				padding-left: 5px;
				cursor:pointer;	
			}
			.edit-hover{
				display: inline-block;
				&:hover{ 
					.edit{
						 height:270px;
						 border-width:1px;
						 opacity: 1;
						}
					.triangle{
						opacity: 1;
					}
				}
			}
			.edit{
				opacity: 0;
				overflow: hidden;
				text-align: center;
				position: absolute;
				transition:all 0.5s;
				top: 30px;
				height: 0;
				left: -65px;
				border: 0px solid #ccc;
				border-radius: 3px;
				width: 100px;
				height: 0;
				background-color: #fff;
		        box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.2);
				ul{
					height: auto;
					line-height: 20px;
					li{
						font-size: 20px;
					}
				}
			}
			.triangle{
				top: 30px;
				opacity: 0;
				position: absolute;
				transition:opacity 0.5s;
				&:before{
					width: 0;
					height: 0;
					border-width: 10px;
					border-color: transparent transparent #dadada transparent;
					content:'';
					position: absolute;
					top: -20px;
					border-style: solid;
					left: 70%;
				}
				&:after{
					width: 0;
					height: 0;
					border-width: 11px;
					border-color: transparent transparent #fff transparent;
					content:'';
					position: absolute;
					top: -20px;
					border-style: solid;
					left: 70%;
				}
			}
		}
	}
}
.container{
	padding: 0;
	width: 1000px;
	margin: 46px auto 0 auto;
	background-color: #62a7d1;
	.nav-left{
		margin-top: 10px;
		float: left;
		width: 150px;
		a{
			padding-left: 15px;
			color: white;
			display: block;
			height: 34px;
			line-height: 34px;
			&:hover{
				text-decoration:none;
				background-color: #7fb9db;
			}
			h1{
				font-size: 14px;
				font-weight: bold;
				height: 34px;
				line-height: 34px;
			}
			h2{
				display: inline-block;
				font-size: 12px;
				margin-left: 5px;
			}
		}
		.line{
			margin-top: 15px;
			height: 15px;
			border-top: 1px solid rgba(255, 255, 255, 0.2);
		}
	}
	.middle-content{
		display:inline-block;
		width: 600px;
		margin-top: 10px;
		.publish-area{
			padding:10px 5px 5px;
			background-color: #fff;
			border: 1px solid #fff;
			border-radius: 1px;
			.head-title{
				color: #1f99f3;
			}
			textarea{
				width: 100%;
				margin-top: 5px;
				min-height: 90px;
				border: 1px solid #cccccc;
				border-radius: 2px;
				outline-color: #ff7d0e;
				padding: 5px;
				box-shadow: 0 0 2px #cccccc inset;
			}
			.func-area{
				position: relative;
				font-size: 14px;
				line-height: 35px;
				.dot{
					font-size: 20px;
					font-weight: bold;
				}
				ul{
					line-height: 35px;
				}
				.privacy{
					font-size: 12px;
					span{
						font-size: 12px;
					}
				}
				#publish{
					display: inline-block;
					background-color: #ff7d0e;
					width: 60px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					border-radius: 3px;
					color: #fff;
					border: 0;
				}
				.photo-wrap{
					display: none;
					position: absolute;
					background-color: #fff;
					border: 1px solid #ccc;
					z-index: 1001;
					box-shadow: 0 4px 20px 1px rgba(0,0,0,0.2);
					padding: 10px;
					border-radius: 3px;
					&:before{
							width: 0;
							height: 0;
							border-width: 10px;
							border-color: transparent transparent #dadada transparent;
							content:'';
							position: absolute;
							top: -20px;
							border-style: solid;
							left: 30%;
						}
						&:after{
							width: 0;
							height: 0;
							border-width: 11px;
							border-color: transparent transparent #fff transparent;
							content:'';
							position: absolute;
							top: -20px;
							border-style: solid;
							left: 30%;
						}
					i{
						position: absolute;
						top: 8px;
						right: 8px;
						cursor:pointer;
						padding: 5px;
						&:hover{
							color:#ff7d0e;
						}
					}
					#img-wrap{
						padding: 10px;
						-moz-column-count:3; 
						-webkit-column-count:3; 
						column-count:3;
						img{
							height: 80px;
							width: 80px;
						}
						.input-box{
							width: 80px;
							height: 80px;
							position: relative;
							overflow: hidden;
							img{
								height: 100%;
								width: 100%;
								border:3px dashed #ccc;
							}
							input{
								opacity: 0;
								position: absolute;
								top:0;
								left: 0;
								width: 100%;
								height: 100%;
								cursor:pointer;
							}
							span{
								position: absolute;
								top: 50%;
								left: 50%;
								margin: -9px 0 0 -9px;
								color: #ccc;
							}
							&:hover{
								img{
									border-color:#ff7d0e; 
								}
								span{
									color: #ff7d0e;
								}
							}
						}
						.img-box{
							width: 80px;
							height: 80px;
							position: relative;
							overflow: hidden;
							img{
								height: 100%;
								width: 100%;
							}
							input{
								opacity: 0;
								position: absolute;
								top:0;
								left: 0;
								width: 100%;
								height: 100%;
								cursor:pointer;
							}
							span{
								display: none;
							}
						}
					}
				}
			}
		}
		.content-area{
			margin-top: 10px;
			.head-switch{
				width: 100%;
				background-color: #fff;
				height: 30px;
				line-height: 30px;
				ul{
					height: 30px;
					line-height: 30px;
				}
			}
			.content-box{
				position: relative;
				border: 1px solid transparent;
				width: 100%;
				padding: 5px;
				margin-top: 10px;
				background-color: #fff;
				.head-img{
					position: absolute;
					left: 10px;
					top: 10px;
					img{
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}
				.content{
					margin-left: 70px;
					display: block;
					padding-right: 30px;
					h1{
						font-size: 16px;
						font-weight: bold;
						margin-bottom:5px; 
					}
					h2{
						margin-top: 5px;
						margin-bottom: 10px;
					}
					.img-box{
						margin:5px 1px 5px 0;
						padding-bottom: 10px;
						img{
							margin: 5px;
							width: 150px;
							height: auto;
							cursor: pointer;
						}
					}
			    }
			    .content-bottom{
					border-top: 1px solid  #ccc;
					width: 100%;
					.logo-btn{
						width: 100%;
					}
					ul>li{
						width: 24%;
						text-align: center;
						border-right:1px solid #ccc;
						margin: 0;
					}
					li:last-child{
						border-right: 0;
					}
				}
			}
		}
	}

	.right-info{
		display:block;
		float: right;
		margin-right: 5px;
		margin-top: 10px;
		width: 230px;
		margin-left: 10px;
		.personal-info{
			position: relative;
			padding: 0;
			height: 176px;
			width: 100%;
			background-color: #fff;
			.skin{
				img{
					height: 88px;
					width: 100%;
				}
			}
			.info{
				width: 100%;
				height: 88px;
				background-color: #fff;
				text-align: center;
				padding-top: 28px;
				h1,h2{
					font-weight: bold;
					color: black;
				}
				a{
					font-size: 18px;
					color: #000;
					&:hover{
						color:#ff7d0e;
						text-decoration: none;
					}
				}
			}
			.avatar{
				position: absolute;
				left: 50%;
				top:50%;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-left: -25px;
				margin-top: -25px;
				background-size: cover;
				overflow: hidden;
				img{
					width: 50px;
					height: 50px;
				}
			}
		}
	}
}